import React, { useState } from 'react';
import TranslatorHeader from '@/components/translator/TranslatorHeader';
import LanguageSelector from '@/components/translator/LanguageSelector';
import FontSizeControl from '@/components/translator/FontSizeControl';
import TranslationResult from '@/components/translator/TranslationResult';
import InputBar from '@/components/translator/InputBar';
import { useRouter } from 'next/router';

const TranslatorPage: React.FC = () => {
  const router = useRouter();
  const [sourceLanguage, setSourceLanguage] = useState('auto');
  const [targetLanguage, setTargetLanguage] = useState('zh');
  const [fontSize, setFontSize] = useState<'small' | 'medium' | 'large'>('medium');
  const [inputText, setInputText] = useState('');
  const [isSpeakerOn, setIsSpeakerOn] = useState(false);

  const handleSwapLanguages = () => {
    if (sourceLanguage !== 'auto') {
      const temp = sourceLanguage;
      setSourceLanguage(targetLanguage);
      setTargetLanguage(temp);
    }
  };

  const handleSpeakerToggle = () => {
    setIsSpeakerOn(!isSpeakerOn);
  };

  const handleSettingsClick = () => {
    router.push('/chat/settings');
  };

  const handleSubmit = () => {
    if (inputText.trim()) {
      // Handle translation submission
      setInputText('');
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col pb-16">
      <TranslatorHeader
        title="美女翻译官"
        onSettingsClick={handleSettingsClick}
        onSpeakerClick={handleSpeakerToggle}
        isSpeakerOn={isSpeakerOn}
      />
      <LanguageSelector
        sourceLanguage={sourceLanguage}
        targetLanguage={targetLanguage}
        onSwap={handleSwapLanguages}
        onSourceChange={setSourceLanguage}
        onTargetChange={setTargetLanguage}
      />
      <FontSizeControl size={fontSize} onChange={setFontSize} />
      <TranslationResult
        sourceText="欢迎你，我的朋友。"
        translatedText="Welcome, my friend."
        fontSize={fontSize}
        isSpeakerOn={isSpeakerOn}
      />
      <InputBar
        value={inputText}
        onChange={setInputText}
        onSubmit={handleSubmit}
      />
    </div>
  );
};

export default TranslatorPage;